/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer, filter, render, renderChildren, normalizeLink, tokenize} from '../../renderer';
import * as cx from 'classnames';
import {Link} from 'react-router';
import Html from '../../../widgets/html';
import TooltipWrapper from '../../../widgets/tooltip';
import * as assign from 'object-assign';

@Renderer({
  name: 'field-list',
  desc: '...',
  test:  /(?:^|\/)field\/list$/
})
export default class ListField extends PureComponent {
  static propTypes = {
    type: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    innerClassName: PropTypes.string
  };

  static defaultProps = {
    placeholder: `-`,
    innerClassName: 'list-group'
  };

  render() {
    const {
      value,
      locals,
      listItem: itemSchema,
      placeholder,
      innerClassName,
      onRequestAction,
      $path
    } = this.props;

    if (!value || Array.isArray(value) && !value.length) {
      return  (<span className="text-muted">{placeholder}</span>);
    }

    return (
      <div className={innerClassName}>
        {Array.isArray(value) ? value.map((item, key) => itemSchema ? (
          <div key={key} className={cx(itemSchema.className || 'list-group-item')}>
            {itemSchema.actions && Array.isArray(itemSchema.actions) ? (
              <div className="pull-right btn-operation">
                {itemSchema.actions.map((action, key) => render(`${$path}/action`, action, {
                  key,
                  data: item,
                  locals,
                  onRequestAction
                }))}
              </div>
            ) : null}

            {itemSchema.avatar ? (<span className="pull-left thumb-sm avatar m-r"><img src={filter(itemSchema.avatar, item)} alt="..." /></span>) : null}

            <div className="clear">
              {itemSchema.remark && (
                <TooltipWrapper id={$path} tooltip={filter(itemSchema.remark, item, value)}>
                  <a
                    className="fa fa-info-circle m-l-sm m-t-xs text-base v-middle text-muted pull-right"
                  />
                </TooltipWrapper>
              )}
              {itemSchema.title ? itemSchema.link ? (<Link to={normalizeLink(tokenize(itemSchema.link, item, value))}>{filter(itemSchema.title, item)}</Link>) : (<span>{filter(itemSchema.title, item)}</span>) : null}
              {itemSchema.subTitle ? (<small className="text-muted clear text-ellipsis">{filter(itemSchema.subTitle, item)}</small>) : null}
              {itemSchema.desc ? (<Html html={filter(itemSchema.desc, item)} />) : null}
              {itemSchema.body ? renderChildren($path, itemSchema.body, assign({}, this.props, {
                data: item
              })) : null}
            </div>
          </div>
        ) : (
          <div className="list-group-item" key={key}>
            {String(item)}
          </div>
        )) : null}
      </div>
    );
  }
}
